<script setup lang="ts">
import {computed, ref} from "vue";

const personList = ref([
  {id: 1, name: "马云", age: 50},
  {id: 2, name: "刘强东", age: 40},
  {id: 3, name: "陶品奇", age: 23},
])


const filterPersonList = computed({
  get() {
    // 读取计算属性执行的函数
    return personList.value.filter(person => person.age >= 30)
  },
  set(newPerson) {
    // 修改计算属性执行的函数
    personList.value = newPerson
  }
})

//创建一个只读的计算属性
const plusOne = computed(() => personList.value.length)

const change = () => {
  filterPersonList.value = [{id: 4, name: "马宝国", age: 70}]
}

</script>

<template>
  <ul>
    <li v-for="(person) in personList" :key="person.id">{{ person }}</li>
  </ul>
  <ul>
    <li v-for="(person) in filterPersonList" :key="person.id">{{ person }}</li>
  </ul>
  <button @click="change">修改计算属性</button>
</template>

